<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <metaname"viewport" content="width=device-width, initial-scale=1.0">
    <title>组件初使用</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    
    
    <div class="container-fluid mt-5">
        <!-- <div>{{tp()}}</div>
        <div>{{pageName}}</div>      -->
        <div class="d-flex bd-highlight">
            <button type="button" class="btn btn-primary mb-4">
                购物车 <span class="badge badge-light">{{cartlist.length}}</span>
            </button>
            <div class="col" style="text-align: right;">价格:￥{{totalPrice}}</div>
        </div>
        <div class="goodlist d-flex flex-wrap justify-content-between">
            <div clas="card mb-5" style="width: 18rem;"  v-for="good in goodlist">
            <img :src="good.imgurl" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{good.name}}</h5>
                    <p class="card-text">原价：￥{{good.old_price}}</p>
                    <p class="card-text">现价：￥{{good.sale_price}}</p>
                    <a href="#" class="btn btn-primary" v-on:click="addToCart(good.name)">添加到购物车</a>
                </div>
            </div>
        </div>

    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'.container-fluid',
            data:{
                goodlist:[
                    {
                        name:"男士破洞春秋牛仔夹克男潮2019新款春装上衣韩版潮流褂子春季外套 黑色 M",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/45/45_06266619536950613_240.jpg",
                        old_price:"168.00",
                        sale_price:"128.00",
                        count:0,
                        comment:0,
                        store:"潮男搭配师"
                    },
                    {
                        name:"2019新款外套男韩版潮流休闲帅气工装夹克男士灯芯绒春秋季上衣服 黑色 M",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/45/45_06266617360388454_240.jpg",
                        old_price:"178.00",
                        sale_price:"158.00",
                        count:0,
                        comment:0,
                        store:"潮男搭配师"
                    },
                    {
                        name:"男生灯芯绒工装外套男韩版潮流加绒夹克ins百搭港风帅气原宿上衣 灰色 M",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/45/45_06266614650486239_240.jpg",
                        old_price:"128.00",
                        sale_price:"108.00",
                        count:0,
                        comment:0,
                        store:"潮男搭配师"
                    },
                    {
                        name:"秋冬季男士潮流修身青年水洗外套中长款韩版牛仔夹克纯棉翻领外衣 黑色 M",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/45/45_06266611090936217_240.jpg",
                        old_price:"228.00",
                        sale_price:"118.00",
                        count:0,
                        comment:0,
                        store:"潮男搭配师"
                    },
                    {
                        name:"男t恤五分袖ins夏季上衣服韩版潮流2019新款嘻哈潮牌帅气 黑色上衣 M",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/47/47_06095305151751796_240.jpg",
                        old_price:"128.00",
                        sale_price:"89.00",
                        count:0,
                        comment:0,
                        store:"潮男公社"
                    },
                    {
                        name:"冬季情侣连帽面包服男士帅气短款棉衣韩版宽松加厚棉袄潮男装外套 黑色 S",
                        imgurl:"https://www.nanshig.com/data/upload/shop/store/goods/39/39_05982354899298264_240.jpg",
                        old_price:"218.00",
                        sale_price:"169.00",
                        count:0,
                        comment:0,
                        store:"好男孩潮品铺"
                    }
                ],
                cartlist:[],
                // pageName:'home'
            },
            methods:{
                addToCart(_name){
                    // 1.筛选goodlist中的商品并将其作为cartlist的新数据添加到其中
                    let cartItem = this.goodlist.filter(item=>{
                        return item.name === _name
                    })[0]
                    if(this.cartlist.includes(cartItem)){
                        cartItem.count ++;
                    }else{
                        this.cartlist.unshift(cartItem);
                        cartItem.count = 1;
                    }
                },
                tp(){
                    // console.log('methods.tp');
                    let total;
                    if(this.cartlist === 0){
                        return total;
                    }else{
                        return total = this.cartlist.reduce((prev,item)=>{
                            return prev + item.sale_price*item.count;
                        },0);
                    }
                }
            },
            // 2.主要用于处理data的数据计算：设置在这里属性均自动默认为存储器属性，尽管形式上均为函数形式，所以在使用的时候不能带上()，而是作为变量使用
            computed:{
                totalPrice(){
                    // console.log('computed.totalPrice');
                    let total;
                    if(this.cartlist === 0){
                        return total;
                    }else{
                        return total = this.cartlist.reduce((prev,item)=>{
                            return prev + item.sale_price*item.count;
                        },0);
                    }
                }
            }

            /* 
                3. 设置data数据pageName:'home'，计算总价的方法分别命名不同名字设置在methods和computed里，在点击添加到购物车时，同时触发；在控制台修改pageName值，methods里的打印显示 ===> 尽管没有数据修改，但这种无效的行为会导致资源浪费，所以涉及到计算的部分会被放置在computed里，因为其具备缓存特性
            */
        })
    </script>
</body>
</html>